<template>
  <sweet-form ref="form" :model="searchForm" label-width="auto" :label-position="labelPosition" :inline="true">
    <sweet-time-range
      :periodType="searchForm.periodType"
      :queryTime="searchForm.queryTime"
      :periodTypeOption="periodTypeOption"
      :selectChangeType="selectChangeType"
      :queryTimeChange="queryTimeChange"
    />
  </sweet-form>
</template>

<script setup>
import {reactive, ref} from 'vue';
import dayjs from 'dayjs';
const labelPosition = ref('right');
// 查询条件
const searchForm = reactive({
  periodType: '900', // 汇聚类型 默认0为periodTypeOption的
  queryTime: [] // 查询时间
});

/* 粒度-时间框数据start */
/*
| 粒度 | 默认查询 | 最大时间跨度 | 最大查询范围 |
|-------|:-----|:-------|:-------|
| 15min | 前一天  | 3天     | 前15天   |
| 60min | 前一天  | 7天     | 前30天   |
| 1day  | 前7天  | 30天    | 前400天  |
| 1week | 前1周  | 31天    | 前400天  |
| 1mon  | 前1年  | 400天   | 前720天  |
*/
// 获取当前时间减去N天的时间戳
const subtractDate = (date, type) => dayjs().subtract(date, type).valueOf();
// 粒度对应的条件
const periodTypeOption = [
  {
    key: '900',
    label: '15分钟',
    type: '15min',
    defaultTime: [subtractDate(2, 'day'), subtractDate(1, 'day')],
    rangeTime: [subtractDate(14, 'day'), subtractDate(1, 'day')],
    spanTime: 1,
    format: 'YYYY/MM/DD HH:mm:ss',
    rangeType: 'datetimerange',
    disableForPeriod: true // 是否按照粒度进行禁用
  },
  {
    key: '3600',
    label: '小时',
    type: 'hour',
    defaultTime: [subtractDate(2, 'day'), subtractDate(1, 'day')],
    rangeTime: [subtractDate(14, 'day'), subtractDate(1, 'day')],
    spanTime: 1,
    format: 'YYYY/MM/DD HH:mm',
    rangeType: 'datetimerange',
    disableForPeriod: true
  },
  {
    key: '86400',
    label: '天',
    type: 'day',
    defaultTime: [subtractDate(2, 'day'), subtractDate(1, 'day')],
    rangeTime: [subtractDate(14, 'day'), subtractDate(1, 'day')],
    spanTime: 3,
    format: 'YYYY/MM/DD',
    rangeType: 'daterange'
  },
  {
    key: '604800',
    label: '周',
    type: 'week',
    defaultTime: [
      dayjs(dayjs(dayjs().day(0)))
        .subtract(7, 'day')
        .valueOf(),
      dayjs().day(0).valueOf()
    ], // 上周天到上上周天
    rangeTime: [subtractDate(11, 'week'), dayjs().day(0).valueOf()],
    spanTime: 5,
    format: 'YYYY/MM/DD',
    rangeType: 'daterange'
  },
  {
    key: '2592000',
    label: '月',
    type: 'month',
    defaultTime: [dayjs().month(dayjs().get('month')).subtract(1, 'month').valueOf(), dayjs().month(dayjs().get('month')).subtract(0, 'month').valueOf()],
    rangeTime: [subtractDate(7, 'month'), subtractDate(0, 'month')],
    spanTime: 3,
    format: 'YYYY/MM',
    rangeType: 'monthrange'
  }
];

const selectChangeType = value => {
  searchForm.periodType = value;
};
const queryTimeChange = value => {
  searchForm.queryTime = value;
};

/* 粒度-时间框数据end */
</script>
